<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>产品管理</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <link rel="shortcut icon" th:href="@{/favicon.ico}">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
  <link th:href="@{/css/animate.css}" rel="stylesheet">
  <link th:href="@{/css/style.css}" rel="stylesheet">
  <link th:href="@{/self/self-common.css}" rel="stylesheet">

  <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
  <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

  <!-- Sweet Alert -->
  <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
</head>

<body class="gray-bg" id="layDate">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12 search-card">
      <div class="ibox">
        <div class="ibox-content">
          <form class="form-inline">
            <div class="form-group searchCX">
              <input id="searchName" class="form-control" type="text" placeholder="请输入产品名称" clearable>
            </div>

            <div class="form-group searchCX">
              <input id="searchSn" class="form-control" type="text" placeholder="请输入产品编号" clearable>
            </div>
            <div class="form-group searchCX">
              <input id="searchBatch" class="form-control" type="text" placeholder="请输入产品批次" clearable>
            </div>
            <div class="form-group">
              <button id="btnSearch" class="btn btn-purple" type="button" onclick="querySearch()">
                <i class="fa fa-search"></i>
                查询
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-sm-12 table-card">
      <div class="ibox ">
        <div class="ibox-title">
          <h5>
            <i class="fa fa-bookmark"></i>
            产品管理
          </h5>
        </div>
        <div class="ibox-content">
          <div id="toolbar">
            <form class="form-inline btnOpacity">
              <div class="btn-group">
                <button class="btn btn-purple" type="button" data-toggle="modal"
                        data-target="#myModalAdd">
                  <i class="fa fa-plus-circle"></i>
                  新增
                </button>
              </div>
              <div class="form-group">
                <button id="importBtn" class="btn btn-purple" type="button" data-toggle="modal" data-target="#myModal">
                  <i class="fa fa-upload"></i>
                  导入
                </button>
              </div>
              <div class="form-group">
                <button id="export" class="btn btn-orange" type="button">
                  <i class="fa fa-download"></i>
                  导出
                </button>
              </div>

            </form>
          </div>
          <table id="dataTable" data-mobile-responsive="true"></table>
        </div>
      </div>
    </div>
  </div>

  <!--    新增-->
  <div class="modal inmodal fade" id="myModalAdd">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">新增产品</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">

          <div class="col-md-12">
            <div class="form-group">
              <label class="col-sm-3 control-label">产品编号：</label>
              <div class="col-sm-7">
                <input id="addProductSn" type="text" name="" class="form-control"
                       placeholder="请输入产品编号">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">产品名称：</label>
              <div class="col-sm-7">
                <input id="addProductName" type="text" name="" class="form-control"
                       placeholder="请输入产品名称">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">简称：</label>
              <div class="col-sm-7">
                <input id="addProductAbbreviation" type="text" name="" class="form-control"
                       placeholder="请输入简称">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">批次号：</label>
              <div class="col-sm-7">
                <input id="addProductBatch" type="text" name="" class="form-control"
                       placeholder="请输入批次号">
              </div>
            </div>


            <div class="form-group">
              <label class="col-sm-3 control-label">性状：</label>
              <div class="col-sm-7">
                <input id="addProductShape" type="text" name="" class="form-control"
                       placeholder="请输入性状">
              </div>
            </div>


            <div class="form-group ">
              <label class="col-sm-3 control-label">制造日期：</label>
              <div class="col-sm-7 tc-date2">
                <input id="addProductManufactureDate" class="laydate-icon form-control layer-date outDate"
                       placeholder="YYYY-MM-DD">
              </div>
            </div>


          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white btn-close" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-purple btn-save" id="btnAddSave">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!--变更-->
  <div class="modal inmodal fade" id="myModalUpdate">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">编辑产品信息</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          <div class="col-md-12">
            <div class="form-group">
              <label class="col-sm-3 control-label">产品编号：</label>
              <div class="col-sm-7">
                <input id="updProductSn" type="text" name="" class="form-control"
                       placeholder="请输入产品编号">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">产品名称：</label>
              <div class="col-sm-7">
                <input id="updProductName" type="text" name="" class="form-control"
                       placeholder="请输入产品名称">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">简称：</label>
              <div class="col-sm-7">
                <input id="updProductAbbreviation" type="text" name="" class="form-control"
                       placeholder="请输入简称">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">批次号：</label>
              <div class="col-sm-7">
                <input id="updProductBatch" type="text" name="" class="form-control"
                       placeholder="请输入批次号">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">性状：</label>
              <div class="col-sm-7">
                <input id="updProductShape" type="text" name="" class="form-control"
                       placeholder="请输入性状">
              </div>
            </div>


            <div class="form-group">
              <label class="col-sm-3 control-label">制造日期：</label>
              <div class="col-sm-7 ">
                <input id="updProductManufactureDate" class="laydate-icon form-control layer-date outDate"
                       placeholder="YYYY-MM-DD">
              </div>
            </div>



          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-white btn-close" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-purple btn-save" id="btnUpdateSave">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!--导入模态框-->
  <div class="modal inmodal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">工单导入</h4>
          <button type="button" class="close" data-dismiss="modal" onclick="removeImp()">×</button>
        </div>
        <div class="modal-body">
          <div class="col-md-12">
            <div class="form-group">
              <div class="import_btn" style="width:100%;text-align:left">
                <label for="import" ><span>选择文件</span></label>
                <span id="fileName">未上传文件</span>
              </div>
              <input type="file" id="import" onchange="loadFile(this.files[0])" name="import" style="width: 220px;opacity:0">
            </div>
            <div class="form-group">
              <a class="downtele" style="text-align:left;" href="#" onclick="downLoadTemp();" ><span style="padding:5px ;font-size:16px;font-weight:200;color:#337ab7">模板下载</span></a>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white btn-close" data-dismiss="modal" onclick="removeImp()">取消</button>
          <button type="button" class="btn btn-purple btn-save" id="btnSave" onclick="mySubmit()">保存</button>
        </div>
      </div>
    </div>
  </div>

</div>


<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>
<!--pdf导出 文本乱码问题-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/pdfmake.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/gbsn00lp_fonts.js}"></script>
<!--将表导出为PDF文件-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.plugin.autotable.js}"></script>

<script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>

  var productSn='';
  var productName='';
  var productBatch='';

  function querySearch() {
    productSn=$.trim($("#searchSn").val());
    productName=$.trim($("#searchName").val());
    productBatch=$.trim($("#searchBatch").val());

    $('#dataTable').bootstrapTable('refresh');
    productSn='';
    productName='';
    productBatch='';
  }

  $(document).ready(function () {
    function queryParams(params) {
      console.log({
        pageSize: params.pageSize,
        pageNumber: params.pageNumber,
        productSn: productSn,
        productName:productName,
        productBatch:productBatch
      })
      return {
        pageSize: params.pageSize,
        pageNumber: params.pageNumber,
        productSn: productSn,
        productName:productName,
        productBatch:productBatch
      }
    }

    $('#dataTable')
            .bootstrapTable({
              url: baseUrl + "getProductPageInfo",
              method: "post",
              queryParamsType: "",
              queryParams: queryParams,
              pageNumber: 1,
              pageSize: 10,
              striped: false,
              cache: false,
              search: false,
              pagination: true,
              showRefresh: false,
              showToggle: false,
              showColumns: false,
              // clickToSelect: true, //是否启用点击选中行
              // uniqueId: "indentId", //每一行的唯一标识，一般为主键列
              // idField: "indentId",
              formatSearch: function () {
                return "";
              },
              iconSize: 'outline',
              sidePagination: "server",
              showExport: false,//显示导出按钮
              buttonsAlign: "right",
              exportTypes: ['excel'],
              pageList: [10, 20, 30, 'all'],
              exportDataType: "basic",//导出类型 'basic':当前页, 'all', 'selected'.
              toolbar: '#toolbar', //工具按钮用哪个容器
              icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list',
                export: 'glyphicon-export'
              },
              exportOptions: {
                ignoreColumn: [7],
                fileName: '供应商信息'
              }
              , responseHandler: function (res) {
                console.log(res)
                var rows = [];
                if (res.total !== 0) {
                  rows = res.list;
                }
                var result = {
                  rows: rows,
                  total: res.total
                };
                return result;
              },
              onEditableSave: function (field, row, oldValue, $ele) {
                //更新数据到数据库

              },
              columns: [{
                field: 'productSn',
                title: '产品编号',
                formatter: function (value, row, index) {
                  if (value == null) {
                    return '';
                  } else {
                    return value;
                  }
                }
              }, {
                field: 'productName',
                title: '产品名称',
                formatter: function (value, row, index) {
                  if (value == null) {
                    return '';
                  } else {
                    return value;
                  }
                }
              }, {
                field: 'abbreviation',
                title: '简称',
                formatter: function (value, row, index) {
                  if (value == null) {
                    return '';
                  } else {
                    return value;
                  }
                }
              }, {
                field: 'productBatch',
                title: '批次号',
                formatter: function (value, row, index) {
                  if (value == null) {
                    return '';
                  } else {
                    return value;
                  }
                }
              },
                {
                field: 'productShape',
                title: '性状',
                formatter: function (value, row, index) {
                  if (value == null) {
                    return '';
                  } else {
                    return value;
                  }
                }
              },

                {
                  field: 'manufactureDate',
                  title: '制造日期',
                  formatter: function (value, row, index) {
                    if (value == null) {
                      return '';
                    } else {
                      return value;
                    }
                  }
                },
                {
                field: 'operation',
                title: '操作',
                align: 'center',
                width: '100',
                formatter: function (value, row, index) {
                  var startBtn = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_edit' onclick='editProduct(\"" + row.id + "\")' title='编辑'></button>";
                  var closeBtn = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_close'  onclick='deleteProduct(\"" + row.id + "\")' title='删除'></button>";
                  return startBtn + closeBtn;
                }
              }
              ],

              // onClickRow: function (row, $element) {
              //     $('.info').removeClass('info');
              //     $($element).addClass('info');
              //     supplierId = row.id;
              // }
            });

    //新增弹窗，数据置空
    $("#myModalAdd").on("hidden.bs.modal", function () {

      $("#addProductBatch").val("");
      $("#addProductSn").val("");
      $("#addProductManufactureDate").val("");
      $("#addProductAbbreviation").val("");
      $("#addProductName").val("");
      $("#addProductShape").val("");

    });
  });
  $("#myModalUpdate").on("hidden.bs.modal", function () {
    $("#updsuppliername").val("");
    $("#updsupplierlinkman").val("");
    $("#updsupplieraddress").val("");
    $("#updsuppliertelephone").val("");
    $("#updsupplierinfo").val("");
  });

  //保存新增
  $("#btnAddSave").click(function () {
    var productSn = $("#addProductSn").val();
    var productName = $("#addProductName").val();
    var abbreviation = $("#addProductAbbreviation").val();
    var shape = $("#addProductShape").val();
    var productBatch=$("#addProductBatch").val();
    var manufactureDate = $("#addProductManufactureDate").val();
    if (!productSn) {
      layer.msg("产品编号不能为空")
      return
    }

    if (!productName) {
      layer.msg("产品名称不能为空")
      return
    }

    if (!productBatch) {
      layer.msg("产品批号不能为空")
      return
    }
    PostWebApi("addProduct", {
      productSn: productSn,
      productName: productName,
      abbreviation: abbreviation,
      productShape: shape,
      productBatch: productBatch,
      manufactureDate:manufactureDate

    }).done(function (data) {
      if (data.code === 0) {
        $("#myModalAdd").modal('hide');
        layer.msg(data.msg)
        $('#dataTable').bootstrapTable('refresh');
      } else {
        layer.msg(data.msg);
      }
    });
  });

  var updateId = "";

  //打开编辑弹窗
  function editProduct(productId) {
    PostWebApi("getProductById", {
      id: productId,
    }).done(function (data) {
      console.log(data)
      $("#updProductSn").val(data.data.productSn);
      $("#updProductName").val(data.data.productName);
      $("#updProductAbbreviation").val(data.data.abbreviation);
      $("#updProductBatch").val(data.data.productBatch);
      $("#updProductShape").val(data.data.productShape);

      $("#updProductManufactureDate").val(data.data.manufactureDate);

    });
    //打开弹窗
    $("#myModalUpdate").modal('show');
    updateId = productId
  }

  //保存变更
  $("#btnUpdateSave").click(function () {
    var productSn = $("#updProductSn").val();
    var productName = $("#updProductName").val();
    var abbreviation = $("#updProductAbbreviation").val();
    var shape = $("#updProductShape").val();
    var productBatch=$("#updProductBatch").val();
    var manufactureDate = $("#updProductManufactureDate").val();
    if (!productSn) {
      layer.msg("产品编号不能为空")
      return
    }

    if (!productName) {
      layer.msg("产品名称不能为空")
      return
    }

    if (!productBatch) {
      layer.msg("产品批号不能为空")
      return
    }
    PostWebApi("updateProduct", {
      id: updateId,
      productSn: productSn,
      productName: productName,
      abbreviation: abbreviation,
      productShape: shape,
      productBatch: productBatch,
      manufactureDate:manufactureDate
    }).done(function (data) {
      console.log(data);
      if (data.code === 0) {
        layer.msg(data.msg)
        $("#myModalUpdate").modal('hide');
        $('#dataTable').bootstrapTable('refresh');
        supplierId = '';
      } else {
        layer.msg(data.msg);
      }
    });
  });

  //删除
  //可以弹出提示，是否确认删除，防止用户误操作
  function deleteProduct(productId) {
    swal({
      title: "您确定要删除该产品吗",
      //text: "删除后将无法恢复，请谨慎操作！",
      type: "warning",
      showCancelButton: true,
      cancelButtonText: "取消",
      confirmButtonColor: "rgb(85 221 218)",
      confirmButtonText: "确定",
      closeOnConfirm: false
    }, function () {
      swal.close();
      PostWebApi("deleteProduct", {id: productId}).done(function (data) {
        if (data.code == "0") {
          $("#dataTable").bootstrapTable('refresh');
        } else {
          layer.msg(data.msg);
        }
      })
    })
  }

  //----------------------------EXCEL-------------------------------------
  // 使用tableExport.js导出数据
  $("#export").click(function () {
    $('#dataTable').tableExport(
            {
              type: 'excel',//导出excel
              escape: 'false',
              ignoreColumn: [6],  //忽略某一列的索引
              fileName: '产品信息',  //文件名称设置
              worksheetName: '产品信息',  //表格工作区名称
              tableName: '产品信息',
              excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
            }
    )
  })

  //下载导入模版
  function downLoadTemp(){
    window.location.href =baseUrl + "downProductExcelTemplate?fileName=产品导入模版";
  }

  //移除文件文字
  function removeImp(){
    var file = document.getElementById('import');
    file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
    //或者
    //file.outerHTML = file.outerHTML; //重新初始化了file的html
    $("#fileName").html('未上传文件');
  }

  //加载文件名
  function loadFile(file){
    $("#fileName").html(file.name);
  }

  //导入excel文件信息
  function mySubmit(){
    var  file = document.getElementById("import").files[0];
    var fileName=$("#fileName").val();
    var preffix = fileName.substring(fileName.lastIndexOf("\\") + 1, fileName.lastIndexOf("."));
    var suffix = fileName.substring(fileName.lastIndexOf("."));
    //创建新的表单数据对象
    var formData = new FormData();
    formData.append("file", file);
    formData.append("preffix", preffix);
    formData.append("suffix", suffix);
    $.ajax({
      url: baseUrl +"productImport",
      type: "POST",
      contentType: false,
      datatype: "text",
      data: formData,
      processData: false, // 告诉jQuery不要去处理发送的数据
      success: function (data) {
        $('#dataTable').bootstrapTable('refresh');
        layer.msg(data.msg)
      }
    });
    removeImp();
    $('#myModal').modal('hide');
    return false;
  }


  laydate({
    elem: '#layDate .outDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
    event: 'focus' //响应事件。如果没有传入event，则按照默认的click
  });

</script>

</body>

</html>


